<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${news.title + ' - 新闻分析系统'}">新闻标题 - 新闻分析系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .news-content {
            font-size: 1.1rem;
            line-height: 1.8;
        }
        .news-meta {
            color: #6c757d;
        }
        .sentiment-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <!-- 与首页相同的导航栏代码 -->
    </nav>

    <main class="container my-4">
        <div class="row">
            <!-- 新闻主体内容 -->
            <div class="col-lg-8">
                <div class="card shadow">
                    <div class="card-body position-relative">
                        <!-- 情感标签 -->
                        <div class="sentiment-badge">
                            <span th:class="'badge ' + (${news.sentiment > 0 ? 'bg-success' : 
                                                       news.sentiment < 0 ? 'bg-danger' : 
                                                       'bg-warning'})">
                                <i th:class="'bi ' + (${news.sentiment > 0 ? 'bi-emoji-smile' : 
                                                     news.sentiment < 0 ? 'bi-emoji-frown' : 
                                                     'bi-emoji-neutral'})"></i>
                                <span th:text="${news.sentiment > 0 ? '正面' : 
                                              news.sentiment < 0 ? '负面' : '中性'}">
                                    情感倾向
                                </span>
                            </span>
                        </div>

                        <!-- 新闻标题 -->
                        <h1 class="card-title mb-4" th:text="${news.title}">新闻标题</h1>

                        <!-- 新闻元数据 -->
                        <div class="news-meta mb-4">
                            <span class="me-3">
                                <i class="bi bi-calendar3"></i>
                                <span th:text="${#temporals.format(news.publishTime, 'yyyy-MM-dd HH:mm')}">
                                    发布时间
                                </span>
                            </span>
                            <span class="me-3">
                                <i class="bi bi-newspaper"></i>
                                <span th:text="${news.source}">来源</span>
                            </span>
                            <span class="me-3">
                                <i class="bi bi-tag"></i>
                                <span class="badge bg-primary" th:text="${news.category}">分类</span>
                            </span>
                            <span>
                                <i class="bi bi-fire text-danger"></i>
                                <span th:text="${news.hotIndex}">热度</span>
                            </span>
                        </div>

                        <!-- 新闻内容 -->
                        <div class="news-content" th:utext="${news.content}">
                            新闻内容
                        </div>

                        <!-- 标签 -->
                        <div class="mt-4">
                            <i class="bi bi-tags"></i>
                            <span th:each="tag : ${news.tags}" class="badge bg-secondary me-2">
                                <a th:href="@{/news/tag/{tag}(tag=${tag})}" 
                                   class="text-white text-decoration-none"
                                   th:text="${tag}">
                                    标签
                                </a>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- 评论区 -->
                <div class="card shadow mt-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">评论区</h5>
                    </div>
                    <div class="card-body">
                        <!-- 发表评论 -->
                        <form th:action="@{/news/{id}/comment(id=${news.id})}" 
                              method="post" 
                              sec:authorize="isAuthenticated()">
                            <div class="mb-3">
                                <textarea class="form-control" 
                                          name="content" 
                                          rows="3" 
                                          placeholder="发表你的评论..."></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">发表评论</button>
                        </form>
                        <div class="alert alert-info" sec:authorize="!isAuthenticated()">
                            请<a href="/login" class="alert-link">登录</a>后发表评论
                        </div>

                        <!-- 评论列表 -->
                        <div class="mt-4">
                            <div th:each="comment : ${comments}" class="mb-3">
                                <div class="d-flex">
                                    <div class="flex-shrink-0">
                                        <img src="/images/avatar.png" 
                                             class="rounded-circle" 
                                             width="40" 
                                             height="40" 
                                             alt="用户头像">
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <div class="d-flex justify-content-between">
                                            <h6 class="mb-0" th:text="${comment.username}">用户名</h6>
                                            <small class="text-muted" 
                                                   th:text="${#temporals.format(comment.createTime, 'yyyy-MM-dd HH:mm')}">
                                                评论时间
                                            </small>
                                        </div>
                                        <p class="mb-0" th:text="${comment.content}">评论内容</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="col-lg-4">
                <!-- 相关新闻 -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">相关新闻</h5>
                    </div>
                    <div class="list-group list-group-flush">
                        <a th:each="related : ${relatedNews}" 
                           th:href="@{/news/{id}(id=${related.id})}"
                           class="list-group-item list-group-item-action">
                            <h6 class="mb-1" th:text="${related.title}">相关新闻标题</h6>
                            <small class="text-muted">
                                <i class="bi bi-calendar3"></i>
                                <span th:text="${#temporals.format(related.publishTime, 'yyyy-MM-dd')}">
                                    发布时间
                                </span>
                            </small>
                        </a>
                    </div>
                </div>

                <!-- 热门新闻 -->
                <div class="card shadow">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0">热门新闻</h5>
                    </div>
                    <div class="list-group list-group-flush">
                        <a th:each="hot : ${hotNews}" 
                           th:href="@{/news/{id}(id=${hot.id})}"
                           class="list-group-item list-group-item-action">
                            <h6 class="mb-1" th:text="${hot.title}">热门新闻标题</h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="bi bi-calendar3"></i>
                                    <span th:text="${#temporals.format(hot.publishTime, 'yyyy-MM-dd')}">
                                        发布时间
                                    </span>
                                </small>
                                <span class="badge bg-danger">
                                    <i class="bi bi-fire"></i>
                                    <span th:text="${hot.hotIndex}">热度</span>
                                </span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-light py-4 mt-5">
        <!-- 与首页相同的页脚代码 -->
    </footer>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 